import React, { Fragment, CSSProperties, useState, useEffect } from 'react'
import { Card, Row, Col, Image, Badge } from 'antd'
import { IDraggable } from '../../../../dnd/component_type'
import './index.less'

// 推荐组件
export default function RecommendPreview (props: IDraggable) {
  const { config, data, meta } = props
  const [ current, setCurrent ] = useState('mail');

  const handleClick = (e: any) => {
    console.log('click ', e);
    setCurrent(e.key)
  };

  const list = [
    {
      url: "https://dummyimage.com/300x300/066dff",
      link: '',
      price: '366.00'
    }, {
      url: "https://dummyimage.com/300x300/ffa88d",
      link: '',
      price: '88.00'
    }, {
      url: "https://dummyimage.com/300x300/ddd0ff",
      link: '',
      price: '1299.00'
    }, {
      url: "https://dummyimage.com/300x300/0ddff0",
      link: '',
      price: '35888.00'
    }
  ]

  return (
    <Card
      title="为你推荐" 
      bordered={false}
      // extra={} 
    >
      <Row >
        {
          list.map((item: any, index: number) => {
            return (
              <Col span={6} key={index}>
                <div className="product-item">
                  <div className="product-image">
                    <Image
                      width={200}
                      src={item.url}
                    />
                  </div>
                  <div className="product-title">
                  苹果iPhone手机维修电池更换 iPhone XR 电池换新【非原厂物料 免费取送】
                  </div>
                  <div className="product-price">
                    <span>￥ {item.price}</span>
                  </div>
                </div>
              </Col>
            )
          })
        }
      </Row>
    </Card>
  );
}